大家好，今天的篇章要介紹的是 Formik

會延續前一天的專案結構接續下去進行修改，如果沒有參與到昨天的建置過程，這邊也有提供原始碼
https://github.com/littlehorseboy/typescript-react/tree/day13-typescript-redux

Formik

就先上 code 再來說明

npm i formik

+ src/components/FormikPractice/FormikPractice.tsx

Formik 使用上就是用 <Formik> 包住 <form> 來幫你做好表單處理的事情，從上到下依序說明 <Formik> 使用的各個屬性

initialValues

初始值，要注意的是型別，設定了就會被自動定型了，可以就把它當成是一個 component 內的 state

後續在使用這個 values 時都會遵照這個型別來處理資料

validate

這是為了驗證 values 的內容所設的 function，有一串長的很特別的 { [key in keyof typeof values]?: string } 的型別，這是為了讓 errors 能遵照 initialValues 的 key 但是要改成都是 string 型別，最後 error 回傳一定要是 { } 空的物件，驗證才是真的通過

onSubmit

表單按下 submit 時，會將 isSubmitting 改為 true，然後驗證有通過，就會進入執行這段 function，actions 裡面也有很多妙用，這裡就是故意 setTimeout
0.5 秒後才將 isSubmitting 改為 false

內容

最上排提供了一堆解構出來了參數（常用的大概這些，不過還有 更多喔，曾用過 setFieldValue 可以額外改變一些值），讓 input 可以用來執行驗證時的事件，有 onChange、onBlur、onSubmit、touched（不熟行動裝置不太確定這項，感覺像是 oninput 但又可能不是），最後是 isSubmitting，它就是剛剛在提到 setTimeout 的地方用到的 boolean 值

這樣就完成一個表單的 component 了，為了展示我要新增一個路由來放它

src/router/Router.tsx

增加一個路由進 routes

然後筆者才發現 RouteWithSubRoutes 沒有寫成動態 path 及 component

將 PrivateRoute 修正動態 path 及 component

src/router/Router.tsx 全部程式碼

還有 PrivateRoute.tsx 也要修改一部分傳遞 props 的型別，配合 RouteI，否則型別檢查是不會通過的

然後就可以到 Header.tsx 增加 Link 按鈕了

執行結果，記得要先輸入名稱登入喔，否則是進不去設定 isPrivate 的路由的

在 blur 時就會驗證，且 submit 是無效的，要將驗證條件都修正完就會執行 submit 的 function 了，在 setTimeout 0.5 秒的期間，按鈕都會是 disable 狀態，妙吧，一堆東西它都幫你整理好了

以上就是筆者在使用 Formik 的一點小小心得

最後附上原始碼
https://github.com/littlehorseboy/typescript-react/tree/day14-formik

明天會繼續 Formik，目前這個基本款樣式似乎還不夠看阿，要搭配 material-ui 改造它一番！